<template>
    <div>
        <el-button class="addClass" type="primary" @click="add()" style="width: 100px">
            <component is="PlusOutlined" style="padding-right: 10px;font-size: 12px"/>
            <span style="font-size: 13px">添 加</span>
        </el-button>
        <el-button class="addClass" type="primary" @click="addSonTable()" style="width: 130px">
            <component is="PlusOutlined" style="padding-right: 10px;font-size: 12px"/>
            <span style="font-size: 13px">添 加 子 表 格</span>
        </el-button>
        <el-table :data="ruleInfo"
                  :border="true"
                  :stripe="true"
                  :show-overflow-tooltip="false"
                  :span-method="sonTableSpanMethod"
                  max-height="80vh">
            <el-table-column prop="ywuEditorInnerId" label="序号" :width="70" align="center"></el-table-column>
            <el-table-column prop="variableName" label="参数">
                <template #default="scope">
                    <span v-if="!(scope.row['isSon'] && scope.cellIndex === 1)">
                        <el-select v-model="scope.row['variableName']" placeholder="参数名称" style="width: 100%">
                            <el-option v-for="info in variableList" :label="info.labelName" :value="info.id" />
                        </el-select>
                    </span>
                    <span v-if="scope.row['isSon'] && scope.cellIndex === 1">
                        <ConditionDataAssociation :ruleInfo="scope.row['sonList']['ruleInfoList']" :variableList="variableList"/>
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop="ruleType" label="操作类型">
                <template #default="scope">
                    <el-select v-model="scope.row['ruleType']">
                        <el-option label="等于" value="eq"/>
                        <el-option label="不等于" value="neq"/>
                        <el-option label="大于" value="bg"/>
                        <el-option label="大于等于" value="bgeq"/>
                        <el-option label="小于" value="lg"/>
                        <el-option label="小于等于" value="lgeq"/>
                        <el-option label="包含" value="like"/>
                        <el-option label="不包含" value="noLike"/>
                        <el-option label="为空" value="null"/>
                        <el-option label="不为空" value="nonNull"/>
                        <el-option label="为真" value="isTrue"/>
                        <el-option label="为假" value="isFalse"/>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column prop="value" label="值">
                <template #default="scope">
                    <el-input v-model="scope.row['value']"/>
                </template>
            </el-table-column>

            <el-table-column prop="linkType" label="连接类型">
                <template #default="scope">
                    <el-select v-model="scope.row['linkType']">
                        <el-option label="且" value="and"/>
                        <el-option label="或" value="or"/>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column align="center" :width="80">
                <template #header>
                    <span>操 作</span>
                </template>
                <template #default="scope">
                    <el-button type="default" size="small" @click="deleteData(scope.row)">
                        <component is="DeleteTwoTone"/>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup name="ConditionDataAssociation">

import {computed, defineProps, ref} from "vue";

let props = defineProps(['variableList', 'ruleInfo']);

let variableList = computed(() => {return props['variableList']})
let ruleInfo = computed(() => {return props['ruleInfo']})

let dialogVisible = ref(false);

function add() {
    // 构建待插入的对象
    let info = {};
    info['variableName'] = "";
    info['ruleType'] = "";
    info['value'] = "";
    info['linkType'] = "or";
    ruleInfo.value.push(info);
    // 为每一行数据添加一个序号
    for (let index = 0; index < ruleInfo.value.length; index++) {
        let info = ruleInfo.value[index]
        info["ywuEditorInnerId"] = index + 1;
    }
}

function addSonTable() {
    // 构建待插入的对象
    let info = {}
    info["sonList"] = {
        ruleInfoList: []
    };
    ruleInfo.value.push(info);
    // 为每一行数据添加一个序号
    for (let index = 0; index < ruleInfo.value.length; index++) {
        let info = ruleInfo.value[index]
        info["ywuEditorInnerId"] = index + 1;
    }
}

function deleteData(row) {
    // 根据序号删除数据
    let deleteIndex = -1
    let paramInfo = ruleInfo.value
    for (let index = 0; index < paramInfo.length; index++) {
        let info = paramInfo[index]
        if (info["ywuEditorInnerId"] === row["ywuEditorInnerId"]) {
            deleteIndex = index
            break
        }
    }
    paramInfo.splice(deleteIndex, 1);
}

function sonTableSpanMethod(info) {
    if (info.row["isSon"] && info.columnIndex === 1) {
        return [1, 4];
    } else if (info.row["isSon"] && (info.columnIndex > 1 && info.columnIndex <= 4)) {
        return [0, 0];
    } else {
        return [1, 1];
    }
}
</script>

<style scoped lang="less">
.addClass {
    margin-bottom: 20px;
    margin-top: 10px;
    margin-right: 20px;
    float: right;
    width: 10%;
}
</style>